<template>
    <div>
        <basic-container>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="mini">
                <el-form-item label="培训状态">
                    <el-select v-model="searchForm.status">
                        <el-option v-for="(item,index) in trainStatusOptions"
                                   :key="index"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="培训主题">
                    <el-input v-model="searchForm.theme" placeholder="请输入培训主题"></el-input>
                </el-form-item>
                <el-form-item label="培训人名称">
                    <el-input v-model="searchForm.name" placeholder="请输入培训人名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchFormListSubmit">搜索</el-button>
                    <el-button @click="resetFormSubmit">重置</el-button>
                </el-form-item>
                <el-row :span="24">
                    <el-col :span="24">
                        <el-button size="small" type="primary" @click="addOrEditForm">添加</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <avue-crud :option="option"
                       :data="allTrainFormList"
                       :table-loading="tableLading"
                       :page="page"
                       @current-change="currentPageChange"
                       @size-change="sizeChange"
                       ref="crud">
                <template slot-scope="scope" slot="menu">
                    <el-button type="primary"
                               size="small"
                               plain
                               @click.stop="addOrEditForm(scope.row,scope.index)">修改
                    </el-button>
                    <el-button type="primary"
                               size="small"
                               plain
                               @click="checkDetail(scope.row)">查看
                    </el-button>
                    <el-button type="primary"
                               size="small"
                               row-del
                               plain
                               @click.stop="deleteForm(scope.row,scope.index)">删除
                    </el-button>
                    <el-button type="primary"
                               size="small"
                               plain
                               @click="endForm(scope.row, scope.index)">{{ scope.row.trainStatus === 0 ? '结束总结' : '修改总结'
                        }}
                    </el-button>
                    <!--                    <el-button type="primary" size="small" v-show="showEndForSubmit === false"  plain @click="updateForm(scope.row, scope.index)">修改总结</el-button>-->
                </template>
                <template slot-scope="scope" slot="trainStatus">
                    {{ scope.row.trainStatus === 0 ? '未完成' : '完成' }}
                </template>
                <template slot-scope="scope" slot="date">
                    {{scope.row.startTime}} <span>至</span> {{ scope.row.endTime }}
                </template>
                <template slot-scope="scope" slot="signNum">
                    {{scope.row.ginseng !== null ? scope.row.ginseng : '0'}}<span>/</span>{{ scope.row.checkIn }}
                </template>
                <template slot-scope="scope" slot="trainMaterials">
                    <span class="seeData" @click="checkData(scope.row, scope.index)">查看</span>
                </template>
                <template slot-scope="scope" slot="url">
                    <span class="seeData" @click="checkPicture(scope.row, scope.index)">查看</span>
                </template>
            </avue-crud>
        </basic-container>

        <!-- 添加或修改培训计划 -->
        <el-dialog :title="addTrainType ? '修改培训计划' : '添加培训计划'" :visible.sync="dialogTrainAdd" width="50%">
            <el-form :model="addTrainForm" ref="addTrainForm" :rules="addTrainFormRules" class="demo-form-inline"
                     size="mini" label-width="100px">
                <el-form-item label="培训主题:" prop="theme">
                    <el-input v-model="addTrainForm.theme" placeholder="请输入培训主题"></el-input>
                </el-form-item>
                <el-form-item label="培训时间:" prop="date">
                    <el-date-picker v-model="addTrainForm.date"
                                    type="daterange"
                                    format="yyyy-MM-dd"
                                    range-separator="至"
                                    :start-placeholder="addTrainForm.startTime"
                                    size="mini"
                                    :end-placeholder="addTrainForm.endTime"></el-date-picker>
                </el-form-item>
                <el-form-item label="培训人:" prop="name">
                    <el-input v-model="addTrainForm.name" placeholder="请输入培训人名称"></el-input>
                </el-form-item>
                <el-form-item label="培训内容:" prop="content">
                    <el-input v-model="addTrainForm.content" type="textarea" placeholder="请输入培训类容"
                              :autosize="{ minRows: 2, maxRows: 4}"></el-input>
                </el-form-item>
                <el-form-item label="资料上传:" prop="upload">
                    <el-upload :action="actionUrl"
                               :headers="uploadHeaders"
                               name="file"
                               :limit='1'
                               accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt,"
                               :on-success="handleSuccess"
                               :on-error="uploadError">
                        <el-button size="small" type="primary">上传</el-button>
                        <span slot="tip" class="el-upload__tip">支持格式 doc、docx、xls、xlsx、ppt、pptx、pdf、txt</span>
                    </el-upload>
                </el-form-item>
                <div class="el-divider"></div>
                <el-form-item label="参培成员:" style="text-align: right">
                    <span>通知参培人员，参培人员会收到系统通知</span>
                    <el-checkbox v-model="addTrainForm.members" style="margin: 0px 20px 0 10px"></el-checkbox>
                    <el-button type="primary" @click="addMembers">添加成员</el-button>
                </el-form-item>
                <el-form-item label-width="0">
                    <el-table :data="checkCurrentPeopleList" border style="width: 100%" size="mini">
                        <el-table-column prop="id" label="序号" type="index"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="mobile" label="电话"></el-table-column>
                        <el-table-column label="部门">
                            <template slot-scope="scope">{{ scope.row.department.name }}</template>
                        </el-table-column>
                        <!--                        <el-table-column prop="operation" label="操作">-->
                        <!--                            <template slot-scope="scope">-->
                        <!--                                <el-button type="primary" @click="addMode = true">删除</el-button>-->
                        <!--                            </template>-->
                        <!--                        </el-table-column>-->
                    </el-table>
                </el-form-item>
                <el-row :span="24" style="text-align: center;">
                    <el-col :span="24">
                        <el-button @click="closeFormSubmit">关闭</el-button>
                        <el-button type="primary" @click="confirmAddTrainForm('addTrainForm')">确认</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

        <!-- 添加成员 -->
        <el-dialog title="添加成员" :visible.sync="dialogTrainAddUser" width="55%">
            <el-form :inline="true" :model="searchMembers" :rules="addMemberRules" class="demo-form-inline" size="mini">
                <el-form-item label="姓名：" prop="name">
                    <el-input v-model="searchMembers.name" placeholder=" 请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="联系方式：" prop="tel">
                    <el-input v-model="searchMembers.tel" placeholder=" 请输入联系方式"></el-input>
                </el-form-item>
                <el-form-item label="选择部门:"
                              prop="department">
                    <el-cascader :change-on-select="true"
                                 :options="getDepartmentTreeSelect"
                                 v-model="searchDepartment"
                                 @change="selectedDepartmentList"
                                 :clearable="true"></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchMembersSubmit()">搜索</el-button>
                </el-form-item>
            </el-form>
                <avue-crud class="customForm"
                           :option="addMembersTableOptions"
                           :data="peopleTableList"
                           :table-loading="tableLading"
                           :page="userpage"
                           ref="crud"
                           @current-change='addMemberPageChange'
                           @size-change="addMemberSizeChange"
                           @selection-change="addMemberSelectedList">
                    <template slot-scope="scope" slot="departmentName">
                        {{ scope.row.department.name}}
                    </template>
                </avue-crud>
            <el-row :span="24" style="text-align: center;">
                <el-button size="mini" @click="closeAddMemberSubmit">关闭</el-button>
                <el-button  size="mini" type="primary" @click="confirmAddMembers">确认</el-button>
            </el-row>
        </el-dialog>

        <!-- 培训详情 -->
        <el-dialog title="培训详情" :visible.sync="dialogTrainFormDetails" width="35%">
            <el-form :model="addTrainForm" class="demo-form-inline" size="mini" label-width="80px">
                <el-form-item label="培训主题:">{{ addTrainForm.theme }}</el-form-item>
                <el-form-item label="培训时间:">{{ displayTrainTime }}</el-form-item>
                <el-form-item label="培训人:">{{ addTrainForm.name }}</el-form-item>
                <el-form-item label="培训类容:">{{ addTrainForm.content }}</el-form-item>
                <el-form-item label="培训总结:">{{ addTrainForm.summary }}</el-form-item>
                <el-form-item label="参培成员:" style="text-align: right"></el-form-item>
                <el-form-item label-width="0">
                    <el-table :data="checkCurrentPeopleList" border style="width: 100%" size="mini">
                        <el-table-column prop="id" label="序号" type="index" align="center"></el-table-column>
                        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                        <el-table-column prop="mobile" label="电话" align="center"></el-table-column>
                        <el-table-column prop="departmentName" label="部门" align="center"></el-table-column>
                        <el-table-column prop="operation" label="签到情况" align="center">
                            <template slot-scope="scope">
                                {{ addTrainForm.checkIn === 0 ? '已签到' : '未签到' }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-row :span="24" style="text-align: center;">
                    <el-col :span="24">
                        <el-button size="small" @click="closeDetailSubmit">关闭</el-button>
                        <el-button size="small" type="primary" @click="dialogTrainFormDetails = false">确认</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

        <!-- 培训总结 -->
        <el-dialog title="培训总结" :visible.sync="dialogTrainFormEnd" width="35%">
            <el-form :model="summaryForm" :data="addTrainForm" class="demo-form-inline" size="mini" label-width="80px">
                <el-form-item label="培训主题:">{{ addTrainForm.theme }}</el-form-item>
                <el-form-item label="培训时间:">{{ displayTrainTime }}</el-form-item>
                <el-form-item label="培训人:">{{ addTrainForm.name }}</el-form-item>
                <el-form-item label="培训类容:">{{ addTrainForm.content }}</el-form-item>
                <el-form-item label="培训总结:">
                    <el-input v-model="summaryFormText" type="textarea" placeholder="请输入培训类容"
                              :autosize="{ minRows: 2, maxRows: 4}"></el-input>
                </el-form-item>
                <el-form-item label="现场照片:">
                    <el-upload :action="actionUrl"
                               :headers="uploadHeaders"
                               :data="uploadData"
                               list-type="picture-card"
                               :show-file-list="true"
                               :file-list="filePeList"
                               :on-preview="handlePictureCardPreview"
                               :on-success="handlePictureSuccess"
                               :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible" :modal="false">
                        <img width="100%" :src="action + dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <div class="el-divider"></div>
                <el-form-item label="参培成员:" style="text-align: right">
                    <span>一键签到：</span>
                    <el-select v-model="allSign" placeholder="请选择" @change="handleAllSign">
                        <el-option v-for="item in finishOption"
                                   :label="item.label"
                                   :value="item.value"
                                   :key="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label-width="0">
                    <el-table :data="checkCurrentPeopleList" border style="width: 100%" size="mini">
                        <el-table-column prop="id" label="序号" type="index"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="mobile" label="电话"></el-table-column>
                        <el-table-column prop="departmentName" label="部门"></el-table-column>
                        <el-table-column prop="operation" label="操作">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.ischeckIn" placeholder="请选择"
                                           @change="handleSign(scope.row)">
                                    <el-option v-for="item in finishOption"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item style="text-align:center;">
                    <el-button @click="dialogTrainFormEnd = false">关闭</el-button>
                    <el-button type="primary" @click="confirmSummarySubmit">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 查看培训资料 -->
        <el-dialog title="培训资料" :visible.sync="dialogCheckData" width="35%">
            <el-row :span="24" style="text-align: center;">
                <el-col :span="24">
                    <el-button @click="dialogCheckData = false">关闭</el-button>
                    <el-button type="primary" @click="dialogCheckData = false">确认</el-button>
                </el-col>
            </el-row>
        </el-dialog>

        <!-- 查看照片 -->
        <el-dialog title="培训照片" :visible.sync="showPictureDialog" width="35%">
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="(item, index) in pictureList" :key="index">
                    <img style="width: 100%; height: 100%" :src="action + item.path"/>
                </el-carousel-item>
            </el-carousel>
        </el-dialog>

        <!----资料弹窗---->
        <el-dialog :visible.sync="informationAlert" title="资料下载" width="420px" :close-on-click-modal="true" :show-close="true">
        <div class="down-ul">
            <div class="down-li" v-for="item in informationList" :key="item.name">
            <span class="name">{{ item.name }}</span>
            <a class="btn" :href="action + item.path" download="filename">下载</a>
            </div>
        </div>
        </el-dialog>
    </div>
</template>

<script>
    import moment from 'moment'
    import website from "../../../const/website";
    import ElSelectDropdown from "element-ui/packages/select/src/select-dropdown"
    import {getToken} from '@/util/auth'
    import {DepartmentTreeVChildrenNull} from '@/util/util'
    import {getUserInfOfSearch} from "@/api/public/userInfo.js"
    import {getDepartmentList, getAllUserList} from "@/api/sysSetup/uesr.js"
    import {trainFormOption, addMemberTableOption, jsonToArray} from "@/const-personal/equipment/train/management.js"
    import {
        getTrainFormList,
        addTrainFormList,
        updateTrainFormList,
        deleteTrainFormList,
        updateTrainSummary,
        getTrainManagementById
    } from '@/api/equipment/train/management'

    export default {
        components: {ElSelectDropdown},
        data() {
            return {
                action: website.axiosUrl,
                actionUrl: website.axiosUrl + '/fileManage/v1/insert/upload', // 添加文件上传地址
                endActionUrl: website.axiosUrl + '/trainManagement/v1/upload',  // 培训总结上传照片
                uploadHeaders: {
                    Authorization: getToken()
                }, // 上传文件获取token
                uploadData: {
                    id: 0,
                    fileNewName: '',
                    fileOldName: '',
                    fileSuffix: '',
                    url: ''
                },
                fileList: [], // 保存上传文件---添加培训计划
                dialogImageUrl: '',
                dialogVisible: false,
                filePictureList: [], // 上传照片-传参
                filePeList: [], // 展示

                informationAlert: false, // 资料弹窗
                informationList: [],

                tableLading: false,
                option: trainFormOption,  // 培训计划列表
                dialogTrainAdd: false,  // 培训计划添加
                dialogTrainAddUser: false,  // 添加成员
                dialogTrainFormDetails: false, // 查看信息详情
                dialogTrainFormEnd: false, // 结束总结
                dialogCheckData: false, //查看培训资料
                summaryForm: {},
                addTrainType: false,  // 显示添加或修改dialog
                showEndForSubmit: true,
                showEndForModel: false,
                showPictureDialog: false, // 查看照片

                pictureList: [{
                    id: 1,
                    url: ''
                }],
                addMembersTableOptions: addMemberTableOption,
                trainStatusOptions: [
                    {value: '-1', label: '全部'},
                    {value: '1', label: '完成'},
                    {value: '0', label: '未完成'}
                ],
                finishOption: [
                    {value: 0, label: '未签到'},
                    {value: 1, label: '已签到'}
                ],
                tableOptionsValue: '',
                allSign: '未签到',
                signValue: '',
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10, // 每页显示多少条
                    pageSizes: [5, 10, 20] // 每页显示个数选择器的选项设置
                },
                userpage: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10, // 每页显示多少条
                    pageSizes: [5, 10, 20] // 每页显示个数选择器的选项设置
                },
                addTrainFormRules: {
                    name: [{required: true, message: "请输入培训人名称", trigger: "blur"}],
                    theme: [{required: true, message: "请输入培训主题", trigger: "blur"}],
                    date: [{required: true, message: "请输入培训时间", trigger: "blur"}],
                    content: [{required: true, message: "请输入培训内容", trigger: "blur"}],
                    // upload: [{ required: true, message: "请上传资料", trigger: "blur" }],
                },
                addMemberRules: {
                    // name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
                    // tel: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
                },

                searchForm: {
                    status: '-1',
                    theme: '',
                    name: ''
                }, // 搜索条件
                allTrainFormList: [],  // 所有培训信息列表
                addTrainForm: {},
                membersTableData: [],
                peopleTableList: [], // 所有成员list
                addMembersTableData: [],
                searchMembers: {
                    name: '',
                    tel: ''
                }, // 添加成员搜索条件
                departmentOption: "", //部门option
                searchDepartment: [],  // 所有部门
                getDepartmentTreeSelect: [],
                departmentTreeSelected: [],  //选中部门
                getDepartmentTree: [], // 部门tree
                selectedMembersList: [], // 选中成员链表
                checkCurrentPeopleList: [], // 查看当前一条培训详情的人员list
                summaryFormText: ''
            }
        },
        computed: {
            displayTrainTime() {
                const {startTime, endTime} = this.addTrainForm
                return moment(startTime).format('YYYY-MM-DD') + ' 至 ' + moment(endTime).format('YYYY-MM-DD')
            }
        },
        methods: {
            // 一键签到
            handleAllSign() {
                this.addTrainForm.peopleList = this.addTrainForm.peopleList.map(item => {
                    return {
                        ...item,
                        ischeckIn: this.allSign
                    }
                })
            },
            // 单个签到
            handleSign(row) {
                this.allSign = ''
                this.addTrainForm.peopleList = this.addTrainForm.peopleList.map(item => {
                    if (row.id === item.id) {
                        return {
                            ...item,
                            ischeckIn: row.ischeckIn
                        }
                    } else {
                        return item
                    }
                })
            },
            // 根据搜索条件搜索
            searchFormListSubmit() {
                const data = {
                    page: this.page.currentPage,
                    size: this.page.pageSize,
                    trainManagement: {
                        trainStatus: this.searchForm.status === '-1' ? '' : this.searchForm.status,
                        name: this.searchForm.name,
                        theme: this.searchForm.theme
                    }
                }
                getTrainFormList(data).then(res => {
                    if (res.data.code === 200) {
                        const data = res.data.data.list
                        if (data.length > 0) {
                            this.allTrainFormList = data
                        } else {
                            this.allTrainFormList = []
                        }
                    } else {
                        this.$notify.error({title: '操作失败', type: 'danger', message: res.data.message})
                    }
                })
            },
            sizeChange(val) {
                this.page.pageSize = val
                this.getAllTrainFormList()
            },
            currentPageChange(val) {
                this.page.currentPage = val
                this.getAllTrainFormList()
            },
            // 重置条件
            resetFormSubmit() {
                this.searchForm = {}
                this.gridData = []
            },
            // 关闭培训计划
            closeFormSubmit() {
                this.dialogTrainAdd = false
            },
            // 添加或修改培训计划model
            addOrEditForm(row) {
                this.dialogTrainAdd = true
                if (row.id) {
                    this.addTrainType = true
                    const info = {id: row.id}

                    getTrainManagementById(info).then(res => {
                        if (res.data.code === 200) {
                            res.data.data.peopleList.forEach((item) => {
                                item.department = { name: item.departmentName }
                            })
                            this.checkCurrentPeopleList = res.data.data.peopleList
                            const data = {
                                checkIn: row.checkIn,
                                content: row.content,
                                date: [row.startTime, row.endTime],
                                ginseng: row.ginseng,
                                id: row.id,
                                isDelete: row.isDelete,
                                name: row.name,
                                peopleList: this.checkCurrentPeopleList,
                                summary: row.summary,
                                theme: row.theme,
                                trainStatus: row.trainStatus,
                                updateName: row.updateName,
                                updateTime: row.updateTime,
                                updateUserId: row.updateUserId
                            }
                            this.addTrainForm = data
                        }
                    })
                } else {
                    this.addTrainForm = {}
                    this.checkCurrentPeopleList = []
                    this.addTrainType = false
                }
            },
            // 确认添加或修改培训计划
            confirmAddTrainForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.addTrainType) {
                            // 修改
                            let memberListId = []
                            this.addTrainForm.peopleList.forEach(item => {
                                memberListId.push({userInfoId: item.userInfoId})
                            })
                            const data = {
                                id: this.addTrainForm.id,
                                theme: this.addTrainForm.theme,
                                content: this.addTrainForm.content,
                                startTime: moment(this.addTrainForm.date[0]).format('YYYY-MM-DD'),
                                endTime: moment(this.addTrainForm.date[1]).format('YYYY-MM-DD'),
                                name: this.addTrainForm.name,
                                peopleList: memberListId,
                                surpassmFiles: [{
                                    fileNewName: this.fileList.fileNewName,
                                    fileOldName: this.fileList.fileOldName,
                                    fileSuffix: this.fileList.fileSuffix,
                                    url: this.fileList.url
                                }]

                            }
                            updateTrainFormList(data).then(res => {
                                if (res.data.code === 200) {
                                    this.$notify({title: '操作成功', type: 'success', message: '修改成功'})
                                    this.dialogTrainAdd = false
                                    this.getAllTrainFormList()
                                } else {
                                    this.$notify.error({title: '操作失败', type: 'dengar', message: res.data.message})
                                }
                            })
                        } else {
                            // 添加
                            let memberListId = []
                            this.membersTableData.map(item => {
                                memberListId.push({userInfoId: item.id})
                            })
                            const data = {
                                id: this.addTrainForm.id,
                                theme: this.addTrainForm.theme,
                                content: this.addTrainForm.content,
                                startTime: moment(this.addTrainForm.date[0]).format('YYYY-MM-DD'),
                                endTime: moment(this.addTrainForm.date[1]).format('YYYY-MM-DD'),
                                name: this.addTrainForm.name,
                                peopleList: memberListId,
                                surpassmFiles: [{
                                    fileNewName: this.fileList.fileNewName,
                                    fileOldName: this.fileList.fileOldName,
                                    fileSuffix: this.fileList.fileSuffix,
                                    url: this.fileList.url
                                }]
                            }
                            addTrainFormList(data).then(res => {
                                console.log('修改或添加')
                                if (res.data.code === 200) {
                                    this.$notify({title: '操作成功', type: 'success', message: '添加成功'})
                                    this.dialogTrainAdd = false
                                    this.getAllTrainFormList()
                                } else {
                                    this.$notify.error({title: '操作失败', type: 'dengar', message: res.data.message})
                                }
                            })
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            // 添加成员
            addMembers() {
                this.searchMembersSubmit()
                this.dialogTrainAddUser = true
            },
            // 获取部门
            _getDepartmentTreeList() {
                getDepartmentList().then(res => {
                    if (res.data.code === 200) {
                        this.departmentOption = res.data.data;
                        this.getDepartmentTreeSelect = DepartmentTreeVChildrenNull(res.data.data, [{
                            label: '全部',
                            value: '-1'
                        }])
                        this.getDepartmentTree = DepartmentTreeVChildrenNull(res.data.data)
                    }
                })
            },
            // 获取当前部门人员信息
            getPeopleList(row) {
                const data = {id: row.id}

                getTrainManagementById(data).then(res => {
                    if (res.data.code === 200) {
                        this.checkCurrentPeopleList = res.data.data.peopleList
                    }
                })
            },
            selectedDepartmentList(list) {
                console.log(list)
                this.departmentTreeSelected = list
            },
            // 搜索成员
            searchMembersSubmit() {
                let data = {
                    page: this.userpage.currentPage,
                    size: this.userpage.pageSize,
                    name: this.searchMembers.name,
                    mobile: this.searchMembers.mobile,
                    departmentId: this.departmentTreeSelected.length > 0
                        ? this.departmentTreeSelected[this.departmentTreeSelected.length - 1]
                        : this.departmentTreeSelected[length]
                }
                getUserInfOfSearch(data).then(res => {
                    if (res.data.code === 200) {
                        this.peopleTableList = res.data.data.list
                        this.userpage.total = res.data.data.total
                        this.userpage.currentPage = res.data.data.pageNum
                        this.userpage.pageSize = res.data.data.pageSize
                    } else {
                        this.$notify.error({title: '查询失败', message: '获取项目成员列表失败！', type: 'danger',});
                    }
                })
            },
            // 关闭添加成员
            closeAddMemberSubmit() {
                this.dialogTrainAddUser = false
            },
            // 确认选择成员添加
            confirmAddMembers() {
                this.membersTableData = this.selectedMembersList
                this.checkCurrentPeopleList = this.selectedMembersList
                console.log(this.checkCurrentPeopleList)
                this.dialogTrainAddUser = false
            },
            // 查看详情
            checkDetail(row) {
                this.dialogTrainFormDetails = true
                const data = {id: row.id}

                this.getPeopleList(row)
                this.addTrainForm = row
            },
            // 删除当前一条培训信息表
            deleteForm(row) {
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                }).then(() => {
                    //请求--删除
                    const data = {id: row.id}
                    deleteTrainFormList(data).then(res => {
                        if (res.data.code === 200) {
                            this.getAllTrainFormList()
                            this.$notify.success('删除成功')
                        } else {
                            this.$notify.error('删除失败')
                        }
                    })
                })
            },
            // 结束总结
            endForm(row) {
                this.addTrainForm = row
                this.dialogTrainFormEnd = true
                this.showEndForModel = false

                getTrainManagementById({id: row.id}).then(res => {
                    if (res.data.code === 200) {
                        this.checkCurrentPeopleList = res.data.data.peopleList
                        let peopleInfo = []
                        

                        res.data.data.peopleList.forEach(item => {
                            peopleInfo.push({
                                id: item.id,
                                trainManagementId: item.trainManagementId,
                                userInfoId: item.userInfoId,
                                name: item.name,
                                mobile: item.mobile,
                                departmentName: item.departmentName,
                                ischeckIn: item.ischeckIn,
                                checkInTime: item.checkInTime
                            })
                        })

                        this.addTrainForm = {...this.addTrainForm, peopleList: peopleInfo}
                        this.summaryFormText = res.data.data.summary
                        // this.uploadData.id = row.id
                        // this.filePictureList = Object.assign([], res.data.data.photoList) ; 
                        this.filePeList = [];
                        res.data.data.photoList.forEach(item => {
                            this.filePeList.push({ name: item.name, url: this.action + item.path, path: item.path }) // 现场照片文件
                        })
                        // console.log(this.filePeList)

                        this.dialogTrainFormEnd = true
                        this.showEndForSubmit = false
                    }
                })
            },
            // 确认提交总结
            confirmSummarySubmit() {
                let arr = []
                this.addTrainForm.peopleList.forEach((item, i) => {
                    arr.push({
                        departmentName: item.departmentName,
                        id: item.id,
                        ischeckIn: item.ischeckIn,
                        mobile: item.mobile,
                        name: item.name,
                        trainManagementId: item.trainManagementId,
                        userInfoId: item.userInfoId
                    })
                })
                console.log(this.filePeList)
                let arrimg = [];
                this.filePeList.forEach(item => {
                    arrimg.push({
                        fileOldName: item.name,
                        url: item.path
                    })
                })
                const data = {
                    id: this.addTrainForm.id,
                    // pictureUrl: this.filePictureList.url,
                    summary: this.summaryFormText,
                    trainPeopleList: arr,
                    surpassmFileList: arrimg
                }
                updateTrainSummary(data).then(res => {
                    if (res.data.code === 200) {
                        this.dialogTrainFormEnd = false
                        this.$notify({title: '操作成功', type: 'success', message: '提交总结成功！'});
                        this.getAllTrainFormList()
                    }
                })
            },
            // 关闭详情
            closeDetailSubmit() {
                this.dialogTrainFormDetails = false
            },
            //tab-分页
            addMemberPageChange(list) {
                // this.addModeTabSelectModePage.currentPage = val;
                // this.addModeSelectModeSearch();
            },
            //tab-分页大小
            addMemberSizeChange(val) {
                // this.addModeTabSelectModePage.pageSize = val;
                // this.addModeSelectModeSearch();
            },
            addMemberSelectedList(list) {
                this.selectedMembersList = list
            },
            // 添加培训计划 ---资料上传成功
            handleSuccess(response, file) {
                if (response.code === 200) {
                    this.fileList = response.data
                    console.log(this.fileList)
                    this.$notify({title: '上传成功', type: 'success', message: '已成功上传项目资料!'});
                } else {
                    this.$notify.error({title: '上传失败', message: '上传项目资料失败！', type: 'danger',});
                }
            },
            // 添加培训计划 ---资料上传失败
            uploadError() {
            },
            // 照片上传成功
            handlePictureSuccess(response, file, fileList) {
                // console.log(response.data)
                this.filePeList.push({ name: response.data.fileOldName, url: this.action + response.data.url, path: response.data.url })
            },
            handleRemove(file, fileList) {
                this.filePeList = Object.assign([], fileList)
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.path;
                this.dialogVisible = true;
            },
            // 查看资料
            checkData(row) {
                console.log(row.fileList)
                this.informationAlert = true;
                this.informationList = row.fileList
            },
            // 查看照片
            checkPicture(row) {
                this.showPictureDialog = true
                this.pictureList = row.photoList
                // const info = [{
                //     id: row.id,
                //     url: website.axiosUrl + row.pictureUrl
                // }]
                // this.pictureList = info
            },
            // 获取所有培训数据信息列表
            getAllTrainFormList() {
                const data = {
                    page: this.page.currentPage,
                    size: this.page.pageSize,
                    trainManagement: {}
                }
                getTrainFormList(data).then(res => {
                    if (res.data.code === 200) {
                        const {data} = res.data
                        this.allTrainFormList = data.list
                        this.page.total = res.data.data.total;
                        this.page.currentPage = res.data.data.pageNum;
                        this.page.pageSize = res.data.data.pageSize;
                    }
                })
            }
        },
        mounted() {
            this._getDepartmentTreeList()
            this.getAllTrainFormList()
        }
    }
</script>

<style>
    .avue-crud__menu {
        min-height: 0px;
    }

    .zindex1 > .el-form-item__content {
        z-index: -1;
    }

    .el-divider {
        display: block;
        height: 1px;
        width: 100%;
        margin: 0 0 24px 0;
        background-color: #dcdfe6;
        position: relative;
    }

    .seeData {
        cursor: pointer;
        color: #3a8ee6;
    }
    
</style>
<style lang="scss" scoped>
  .down-ul {
    border-top: 1px solid #f2f2f2;
    width: 100%;
    .down-li {
      border-bottom: 1px solid #f2f2f2;
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        flex: auto;
      }
      .btn {
        display: inline-block;
        padding: 2px 10px;
        background: cornflowerblue;
        color: #ffffff;
        border-radius: 2px;
        cursor: pointer;
        flex: none;
        margin-left: 10px;
      }
    }
  }
</style>